<template>
	<view class="container">
		<cool-navbar v-model="serVal" :avatar="vk.getVuex('$user.userInfo.avatar')||null"></cool-navbar>
		
		<u-sticky :enable="enable" h5-nav-height="0">
			<view class="tbsV" style="position: relative;">
				<u-tabs-swiper ref="uTabs" :list="tabsList" :current="current" @change="tabsChange"
					:is-scroll="false" swiperWidth="750" active-color="#1B975A"></u-tabs-swiper>
			</view>
		</u-sticky>
		
		<swiper style="height: 1055rpx;" :current="swiperCurrent" @transition="transition"
			@animationfinish="animationfinish">
			<swiper-item class="swiper-item">
				<scroll-view scroll-y style="height: 100%;width: 100%;" @scrolltolower="onreachBottom">
					<view>
						1
					</view>
				</scroll-view>
			</swiper-item>
			<swiper-item class="swiper-item1">
				<scroll-view scroll-y style="height: 100%;width: 100%;" @scrolltolower="onreachBottom">
					<view>
						<view class="u-swipe-view">
							<u-swiper :list="swipePicList" mode="dot" interval="5000">

							</u-swiper>
						</view>
						<view class="head1">
							<view class="head1_item">
								<u-image width="45rpx" height="45rpx" src="../../static/icon/hb.png"></u-image>
								<text>干货</text>
							</view>
							<view class="head1_item">
								<u-image width="45rpx" height="45rpx" src="../../static/icon/zx.png"></u-image>
								<text>热闻</text>
							</view>
							<view class="head1_item">
								<u-image width="45rpx" height="45rpx" src="../../static/icon/lp.png"></u-image>
								<text>礼品</text>
							</view>
							<view class="head1_item">
								<u-image width="45rpx" height="45rpx" src="../../static/icon/fx.png"></u-image>
								<text>发现</text>
							</view>

						</view>
						<u-gap height="15" bg-color="#F6F6F6"></u-gap>
						<view class="posts_list">
							<posts v-for="(item,index) in postsList"
							:nickName="item.nickName"
							:avatar="item.avatar"
							:content="item.content"
							:imgList="item.imgList"
							:time="item.time"
							:comments="item.comments"
							:dzNum="item.dzNum"
							:commentsNum="item.commentsNum"
							:mobileType="item.mobileType"
							>
								
							</posts>
							<u-gap height="15" bg-color="#F6F6F6"></u-gap>
						</view>

						<view class="tiezi" style="height: 900px;">

						</view>
					</view>
				</scroll-view>
			</swiper-item>
			<swiper-item class="swiper-item">
				<scroll-view scroll-y style="height: 100%;width: 100%;" @scrolltolower="onreachBottom">
					<view class="" style="height: 900px;">
						3
					</view>
				</scroll-view>
			</swiper-item>
			<swiper-item class="swiper-item">
				<scroll-view scroll-y style="height: 100%;width: 100%;" @scrolltolower="onreachBottom">
					<view class="" style="height: 900px;">
						4
					</view>
				</scroll-view>
			</swiper-item>
		</swiper>
		<view>
				<u-popup v-model="show"  :closeable="true" mode="bottom" height="35%" :maskCustomStyle="{backgroundColor:'hska(0,0%,100%,.3)',backdropFilter:'blur(12px)'}">
					<view  class="pop" style="height: 100%;">
						
							<view class="content" style="height: 100%;display: flex;justify-content: center;align-items: center;">
								<view @click="createPosts" class="" style="display: flex;justify-content: center;align-items: center;flex-direction: column">
									<view class="" style="width: 100rpx;height: 100rpx;border-radius: 50%;background-color: #1b975a;display: flex;flex-direction: column;justify-content: center;align-items: center;">
										<u-icon color="#ffffff" size="40" name="edit-pen"></u-icon>
									</view>
									<view class="">
										<text style="font-size: 28rpx;">动态</text>
									</view>
								</view>
							</view>
					</view>
				</u-popup>
				
			</view>

	</view>
</template>


<script>
	var that; // 当前页面对象
	var vk; // vk依赖
	const db = uniCloud.database()
	export default {
		data() {
			// 页面数据变量
			return {
				show:false,
				postsList:[],
				enable: false,
				serVal: '',
				
				avatar: 'https://gimg2.baidu.com/image_search/src=http%3A%2F%2Fup.enterdesk.com%2F2021%2Fedpic%2F0b%2F17%2F04%2F0b1704a9741f4e7ddd07939877dd3590_1.jpg&refer=http%3A%2F%2Fup.enterdesk.com&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=jpeg?sec=1643518167&t=1b98f6f16c4d584177b6db7d136dcdd8',
				// init请求返回的数据
				tabsList: [{
					name: '关注',
					count: 5
				}, {
					name: '动态'
				}, {
					name: '话题'
				}, {
					name: 'Cool图'
				}],
				swipePicList: [{
					image: 'https://vkceyugu.cdn.bspapp.com/VKCEYUGU-d0d1dade-d4aa-4389-a86d-0459737eb16e/b1d1e070-7b6f-4193-8171-0f69c2bc50a5.jpg'
				}, {
					image: 'https://vkceyugu.cdn.bspapp.com/VKCEYUGU-d0d1dade-d4aa-4389-a86d-0459737eb16e/22c0de04-8b78-4fa3-884d-6439b6549201.jpg'
				}],
				current: 1,
				swiperCurrent: 1,
				data: {

				},
				// 表单请求数据
				form1: {

				},
				scrollTop: 0,
			}
		},
		onPageScroll(e) {
			that.scrollTop = e.scrollTop;
		},
		// 监听 - 页面每次【加载时】执行(如：前进)
		onLoad(options = {}) {
			uni.onTabBarMidButtonTap(()=>{
				this.show = true
			})
			that = this;
			vk = that.vk;
			that.options = options;
			that.init(options);
			
			this.postsList = [{
				nickName:'买辣椒也用券',
				avatar:this.avatar,
				content:`<span>
					<span style="color: #1B975A;">#我的2022目标清单#<br>
					</span>
					1.新的一年懂事一点让女朋友少烦恼多开心<br>
					2.少看屏幕少熬夜，每天坚持锻炼<br>
					3.认真备考六级争取考过<br>
					4.考去一个比左职好的学校读一个比机械好的专业（我要...<span style="color: #1B975A;">查看更多</span>
				</span>`			
				,
				imgList:['https://img-s-msn-com.akamaized.net/tenant/amp/entityid/AAS8yOl.img?h=630&w=1200&m=6&q=60&o=t&l=f&f=jpg',
				'https://picb5.photophoto.cn/38/647/38647665_1.jpg',
				'https://tse1-mm.cn.bing.net/th/id/R-C.9029c5d16bf6947152302e5a790e1cc8?rik=XW7xWe3z7m7%2bng&riu=http%3a%2f%2fimg.daimg.com%2fuploads%2fallimg%2f200410%2f3-200410144557.jpg&ehk=RR3I7sZckk6sec7b0p94MQBVKhrhjn1PuaIH1F6TR6E%3d&risl=&pid=ImgRaw&r=0',
				],
				time:1641394942,
				mobileType:'Realme X50 Pro',
				comments:{
					dzNum:8, 
					nickname:'山东科技大学土木工程与建筑学院',
					content:'java就图一乐，真正技术还得看jvav大佬'
				},
				dzNum:60,
				commentsNum:20
				}]
			
			
			// #ifdef H5
			var originalHeight = document.documentElement.clientHeight || document.body.clientHeight;
			window.onresize = function() {
				//键盘弹起与隐藏都会引发窗口高度发生变化
				var resizeHeight = document.documentElement.clientHeight || document.body.clientHeight;
				if (resizeHeight - 0 < originalHeight - 0) {
					//键盘弹出，to do something
					uni.hideTabBar()

				} else {
					//键盘收起,to do something
					uni.showTabBar()
				}
			}
			// #endif

		},
		// 监听 - 页面【首次渲染完成时】执行。注意如果渲染速度快，会在页面进入动画完成前触发
		onReady() {

		},
		mounted() {
			
	
		},
		// 监听 - 页面每次【显示时】执行(如：前进和返回) (页面每次出现在屏幕上都触发，包括从下级页面点返回露出当前页面)
		onShow() {
			this.enable = true
		},
		// 监听 - 页面每次【隐藏时】执行(如：返回)
		onHide() {
			this.enable = false
		},
		// 监听 - 页面触底部
		onReachBottom() {

		},
		// 监听 - 窗口尺寸变化(仅限:App、微信小程序)
		onResize() {

		},
		// 监听 - 点击右上角转发时
		onShareAppMessage(options) {

		},
		// 监听 - 页面创建时
		created() {

		},
		// 监听 - 下拉刷新
		onPullDownRefresh() {
			setTimeout(() => {
				uni.stopPullDownRefresh();
			}, 1500)
		},
		// 函数
		methods: {
			// 页面数据初始化函数
			init(options) {
				// vk.reLaunch("/pages_template/uni-id/index/index");
			},
			pageTo(path) {
				// vk.navigateTo(path);
			},
			tabsChange(index) {
				// console.log(index)
				// this.current = index;
				this.swiperCurrent = index;
			},
			transition(e) {
				let dx = e.detail.dx;
				this.$refs.uTabs.setDx(dx);
			},
			animationfinish(e) {
				let current = e.detail.current;
				this.$refs.uTabs.setFinishCurrent(current);
				this.swiperCurrent = current;
				this.current = current;
			},
			createPosts(){
				uni.navigateTo({
					url:'../createPosts/createPosts'
				})
				this.show = false
			}
			
		},
		// 过滤器
		filters: {

		},
		// 计算属性
		computed: {

		}
	}
</script>
<style lang="scss" scoped>
	page {
		height: 100%;

		.container {
			height: 100%;
			tbsV {
				background-color: #fff;
			}
			
			.tbsV:after {
				content: ' ';
				position: absolute;
				left: 0;
				top: 15%;
				pointer-events: none;
				box-sizing: border-box;
				-webkit-transform-origin: 0 0;
				transform-origin: 0 0;
				width: 199.8%;
				height: 199.7%;
				-webkit-transform: scale(0.5, 0.5);
				transform: scale(0.5, 0.5);
				border: 0 solid #e4e7ed;
				border-bottom-width: 1px;
				z-index: 1;
				background-color: #fff;
			
			}
			.swiper-item1 {

				.u-swipe-view {
					padding: 40rpx 30rpx 20rpx;
				}

				.head1 {
					padding: 10rpx 10rpx 20rpx;

					display: flex;
					justify-content: space-around;

					.head1_item {
						display: flex;
						flex-direction: column;
						align-items: center;
					}

					.head1_item text {
						margin-top: 10rpx;
					}

				}

				.posts_list {

					
				}
			}

		}
	}
</style>
